<template>
  <div>
    <!-- 页面展示 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" @click="createItem">新增</el-button>
      </div>
      <el-table :data="activityList" border style="width: 100%">
        <el-table-column label="#" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="活动图片" width="180" align="center">
          <template slot-scope="scope">
            <img class="img" :src="scope.row.pic" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="活动时间" width="180" align="center">
          <template slot-scope="scope">
            <div>开始时间: {{ scope.row.promotionStartTime }}</div>
            <div>结束时间: {{ scope.row.promotionEndTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="是否过期" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.publishStatus ? "否" : "已过期" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" align="center">
        </el-table-column>
        <el-table-column label="品牌名称" prop="brandName" align="center">
        </el-table-column>
        <el-table-column label="商品价格" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.price }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="商品类别"
          prop="productCategoryName"
          align="center"
        >
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="default" @click="delRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 外层弹窗 -->
    <el-dialog
      class="dolog"
      title="热销详情"
      style="margin: 0"
      :visible.sync="outerVisible"
      width="80%"
    >
      <!-- 头部搜索 -->
      <el-card shadow="always" :body-style="{ padding: '0 20px' }">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <el-form :model="searchForm" :inline="false" size="normal">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item>
                <el-input
                  placeholder="商品名称/模糊查询"
                  v-model="searchForm.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-input
                  placeholder="商品货号"
                  v-model="searchForm.productSn"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                  clearable
                  v-model="searchForm.brandId"
                  placeholder="品牌"
                >
                  <el-option
                    v-for="item in searchForm.brand"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                  v-model="searchForm.publishStatus"
                  placeholder="上架状态"
                  clearable
                >
                  <el-option
                    v-for="item in searchForm.upStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                  v-model="searchForm.verifyStatus"
                  placeholder="审核状态"
                  clearable
                >
                  <el-option
                    v-for="item in searchForm.auditStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="initTable(1)"
                    >立即搜索</el-button
                  >
                  <el-button @click="resetSearchForm">重置</el-button>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 弹窗table表格 -->
      <el-card
        shadow="always"
        class="tableCart"
        :body-style="{ padding: '20px' }"
      >
        <div slot="header">
          <span>商品列表</span>
        </div>

        <el-table
          ref="multipleTable"
          :data="tableItems"
          tooltip-effect="dark"
          style="width: 100%"
          max-height="450"
          highlight-current-row
          border
        >
          <el-table-column type="index" width="55" label="#" align="center">
          </el-table-column>
          <el-table-column width="55" label="选择" align="center">
            <template slot-scope="scope">
              <el-radio v-model="scopeValue" @change="toDeepItem(scope.row)" :label="scope.row">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <img class="tableImg" :src="scope.row.pic" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
              <div>{{ scope.row.brandName }}</div>
              <div>{{ scope.row.description }}</div>
            </template>
          </el-table-column>

          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              <div>原价:{{ scope.row.originalPrice }}</div>
              <div>现价:{{ scope.row.price }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="商品类别"
            prop="productCategoryName"
            align="center"
          >
          </el-table-column>
          <el-table-column label="重量" prop="weight" align="center">
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 内层表格 -->
      <el-dialog
        width="50%"
        title="编辑限时活动"
        :visible.sync="innerVisible"
        append-to-body
        @close="closeInnerTable"
      >
        <el-form
          :model="innerForm"
          label-width="150px"
          :inline="false"
          size="normal"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品原价">
                <div>{{ innerForm.originalPrice }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品名称">
                <div>{{ innerForm.name }}</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="促销价格">
                <el-input-number
                  v-model="innerForm.promotionPrice"
                  :min="-100"
                  :max="100"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序">
                <el-input-number
                  v-model="innerForm.sort"
                  :min="-100"
                  :max="100"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10"
              ><el-form-item label="开始时间">
                <el-date-picker
                  @blur="startTimeBlur"
                  v-model="innerForm.promotionStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="10" :offset="2"
              ><el-form-item label="结束时间">
                <el-date-picker
                  @blur="endTimeBlur"
                  v-model="innerForm.promotionEndTime"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10"
              ><el-form-item label="活动购买数量">
                <el-input
                  v-model="innerForm.promotionPerLimit"
                  size="normal"
                  clearable
                >
                </el-input> </el-form-item
            ></el-col>
            <el-col :span="12" :offset="2">
              <el-form-item label="图片">
                <div class="maskImg">
                  <img class="img-c" :src="innerForm.pic" alt="" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="nowCreate">立即创建</el-button>
            <el-button @click="innerVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="start"
        :page-sizes="[5, 10]"
        :page-size="limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="fullData"
      >
      </el-pagination>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import {
  findAllRecommends,
  productsByPage,
  addRecommend,
  findAllBrand,
  delRecommend
} from "@/api/marketing/activity/activity.js";
import buttomBanner from "@/components/buttomBanner";
export default {
  data() {
    return {
      scopeValue:"",
      activityList: [],
      start: 1,
      limit: 5,
      fullData: 0,
      innerForm: {
        promotionPrice: "",
        sort: "",
        promotionStartTime: "",
        promotionEndTime: "",
        pic: "",
        promotionPerLimit: "",
      },
      searchForm: {
        name: "",
        productSn: "",
        publishStatus: "",
        verifyStatus: "",
        brandId: "",
        brand: [],
        upStatus: [
          {
            value: 0,
            label: "未上架",
          },
          {
            value: 1,
            label: "已上架",
          },
        ],
        auditStatus: [
          {
            value: 0,
            label: "未审核",
          },
          {
            value: 1,
            label: "已审核",
          },
        ],
      },
      tableItems: [],
      innerVisible: false,
      outerVisible: false,
    };
  },
  components: {
    buttomBanner,
  },
  methods: {
    nowCreate() {
      var recommendVo = {
        productId: this.innerForm.id,
        promotionEndTime: this.innerForm.promotionEndTime,
        promotionPerLimit: this.innerForm.promotionPerLimit,
        promotionPrice: this.innerForm.promotionPrice,
        promotionStartTime: this.innerForm.promotionStartTime,
        sort: this.innerForm.sort,
      };

      this.$confirm("是否确认创建?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          addRecommend(recommendVo).then((res) => {
            if (res.success) {
              this.$message.success("创建成功");
              this.innerVisible = false;
              this.outerVisible = false;
              this.init();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          console.log(123);
        });
    },
    // 获取选择开始时间
    startTimeBlur(a) {
      this.innerForm.promotionStartTime = a.displayValue;
    },
    // 获取选择结束时间
    endTimeBlur(a) {
      this.innerForm.promotionEndTime = a.displayValue;
    },
    // 打开内层弹窗
    toDeepItem(item) {
      this.innerVisible = true;
      this.innerForm.name = item.name;
      this.innerForm.originalPrice = item.originalPrice;
      this.innerForm.pic = item.pic;
      this.innerForm.id = item.id;
    },
    // 关闭内层弹窗
    closeInnerTable(){
      this.scopeValue=""
    },
    // 切换表格每页显示数量
    handleSizeChange(v) {
      this.limit = v;
      this.start = 1;
      this.initTable();
    },
    // 切换页码
    handleCurrentChange(v) {
      this.start = v;
      this.initTable();
    },
    // 新建页面出现弹窗table
    createItem() {
      this.outerVisible = true;
    },
    // 初始化页面展示数据
    init() {
      findAllRecommends().then((res) => {
        if (res.success) {
          this.activityList = res.data.items;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 初始化弹窗搜索品牌下拉选择内容
    initSearchForm() {
      var arr = [];
      findAllBrand().then((res) => {
        if (res.success) {
          // 第一层搜索数据
          res.data.items.forEach((el) => {
            arr.push({
              label: el.name,
              value: el.id,
            });
          });
          this.searchForm.brand = arr;
        }
      });
    },
    // 重置弹窗表头搜索表单
    resetSearchForm(){
      this.searchForm.name = "";
      this.searchForm.productSn = "";
      this.searchForm.publishStatus = "";
      this.searchForm.verifyStatus = "";
      this.searchForm.brandId = "";
    },
    // 初始化table数据
    initTable(num) {
      var productQueryVo;
      if (num) {
        productQueryVo = {
          name: this.searchForm.name,
          productSn: this.searchForm.productSn,
          publishStatus: this.searchForm.publishStatus,
          verifyStatus: this.searchForm.verifyStatus,
          brandId: this.searchForm.brandId
        };
        this.start=1;
        this.limit=5;
      }
      productsByPage(this.start, this.limit,productQueryVo).then((res) => {
        if (res.success) {
          // 第一层table展示数据
          this.tableItems = res.data.rows;
          // 分页总数居
          this.fullData = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除行商品
    delRow(item) {
      var id = item.recommendId;
      this.$confirm("是否删除该项内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRecommend(id).then((res) => {
            if (res.success) {
              this.$message.success("删除成功");
              this.init();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {}); 
    },
  },
  created() {
    this.init();
    this.initTable();
    this.initSearchForm();
  },
};
</script>

<style scoped lang="scss">
.img {
  width: 100px;
  height: 100px;
}
.img-c {
  width: 150px;
  height: 150px;
}
.tableImg {
  width: 100px;
  height: 100px;
}
.tableCart {
  margin-top: 30px;
}

.dolog {
  margin-top: -120px !important;
}
.el-dialog__footer {
  padding: 0 20px 10px !important;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.dialog-footer {
  margin-top: -30px;
}
</style>